﻿
@{
    ViewBag.Title = "样品组管理";
}

<div class="row col-md-12 ml-0" style="min-height:5vh;">
    <strong class="font-rfs" style="margin-right: 2rem;padding-top: 0.4rem;">样品组管理</strong>
    <select id="SampleGroup-Type" class="form-control font-rfs custom-headtoolbar-select" style="width:10%;"></select>
    <button id="SampleGroup-add" class="btn btn-rfs"><i class="bi-plus-square"></i> 添加</button>
    <button id="SampleGroup-Edit" class="btn btn-rfs"><i class="bi-pencil-square"></i> 编辑</button>
    <button id="SampleGroup-DeleteSG" class="btn btn-rfs"><i class="bi-trash" onclick=""></i> 删除</button>
</div>
<div class="row col-md-12 ml-0 pre-scrollable" style="min-height:90vh;">
    <div class="row col-md-12" style="padding-right:0px;left: 15px;padding-left: 0px;min-height:40vh;">
        <div class="table-responsive-sm shadow p-0 bg-white rounded col-md-12" style="min-height:40vh;">
            <table id="SampleGroup-Table" class="table table-striped table-bordered table-sm table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>样品组名</th>
                        <th>类型</th>
                        <th>实验室</th>
                        <th>工作组</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <div class="row col-md-12 ml-0" style="margin-top: 1vh; padding-right:0px;padding-left: 0px;min-height:49vh;">
        <div class="row col-md-12 tab-content" style="padding-left: 0;padding-right: 0px;right: -15px;min-height:3vh;">
            <ul class="nav col-md-12" style="padding-right: 0;margin-bottom: 1px;">
                <li class="tabButton col-md-1 tab-first-active font-rfs" style="text-align: center;"><a href="#tabAnalyte" data-toggle="tab" class="text-decoration-none">样品列表</a></li>
                <li class="col-md-11 tab-Notactive" style="text-align: center;"><a href="" data-toggle="tab"></a></li>
            </ul>
        </div>
        <div class="col-md-12 ml-0 mr-0 tab-pane active tab-content tab-body" id="tabAnalyte" style="padding-right: 0px;padding-left: 0px;top: -2px;min-height:46vh;">
            <div class="row col-md-12" style="min-height:2vh;">
                <button id="SampleGroup-addSample" class="btn btn-rfs"><i class="bi-plus-square"></i> 添加</button>
                <button id="SampleGroup-delSample" class="btn btn-rfs"><i class="bi-trash" onclick=""></i> 删除</button>
            </div>
            <div class="table-responsive-sm p-0 bg-white rounded col-md-12 pre-scrollable" style="min-height:41vh;">
                <table id="SampleGroup-Sample" class="table table-striped table-bordered table-sm table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>默认编号</th>
                            <th>描述</th>
                            <th>实验室</th>
                            <th>工作组</th>
                            <th>流程</th>
                            <th>报告</th>
                            <th>数量</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="SampleGroup-Modal" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p id="SampleGroup-Modal-Title" class="pt-3 pl-3 font-rfs"></p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <div id="Embed"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="SampleGroup-Modal-delSample" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p class="pt-3 pl-3 font-rfs">删除样品</p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <p class="font-rfs">确认删除当前样品吗？</p>
            </div>
            <div class="modal-Delete-footer">
                <button id="SampleGroup-Modal-delSample-delete" class="btn btn-outline-primary border-radius-noradius noLeftBorder noRightBorder font-rfs" style="width:50%; height:fit-content">删除</button>
                <button id="modal-cancel" data-dismiss="modal" class="btn btn-outline-primary border-radius-noradius noRightBorder font-rfs" style="width:50%; height:fit-content">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="SampleGroup-Modal-DelSpecSG" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p class="pt-3 pl-3 font-rfs">删除样品组</p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <p class="font-rfs">确认删除当前样品组吗？</p>
            </div>
            <div class="modal-Delete-footer">
                <button id="SampleGroup-Modal-DelSpecSG-delSample" class="btn btn-outline-primary border-radius-noradius noLeftBorder noRightBorder font-rfs" style="width:50%; height:fit-content">删除</button>
                <button id="SampleGroup-Modal-DelSpecSG-cancel" data-dismiss="modal" class="btn btn-outline-primary border-radius-noradius noRightBorder font-rfs" style="width:50%; height:fit-content">取消</button>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>

        $(document).ready(function () {
            LoadSampleGroupTypeList('SampleGroup-Type');
        });
        
        $("#SampleGroup-Type").change(function () {
            RefreshTable();
        });

        function RefreshTable() {
            $('#SampleGroup-Table').bootstrapTable('destroy'); // 这行代码必须加，否则数据无法刷新
            var columns = [{ field: "id", visible: false }, { field: "name" }, { field: "type" }, { field: "site" }, { field: "group" }, { field: "description" }];

            $('#SampleGroup-Table').bootstrapTable({
                method: 'post',
                url: "GetSampleGroupByType",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
                queryParams: function (params) {
                    var data = {
                        limit: params.limit,
                        offset: params.offset,
                        Type: $("#SampleGroup-Type").find("option:selected").text()
                    };
                    return data;
                }, //参数
                queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求
                dataField: "rows",

                uniqueId: "id",          // 设置主键
                sidePagination: "server", // 服务器端分页，这个参数必需设置
                pagination: true,  // 显示分页条,设为true，启用了分页功能
                pageSize: 10,   // 默认页大小
                pageList: [10, 15, 20, 30],  // 控制每页数目
                locale: "zh-CN",
                columns: columns,          // 加载列定义, 注意！这个地方绑定的列名称开头大写字母会全部变成小写。
                onClickRow: function (row, $element, field) {
                    $("#SampleGroup-Table").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");
                    var sgid = GetSelectIdByColor('SampleGroup-Table');
                    LoadSample(sgid);
                },
                silent: true,  //刷新事件必须设置
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {  //没有匹配的结果
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    $('#SampleGroup-Table').bootstrapTable('removeAll');
                },
                onLoadSuccess: function (data) {   // 数据加载成功后触发该事件
                    SetBootstrapStyle();
                },
                formatShowingRows: function (pageFrom, pageTo, totalRows) {
                    return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
                },
                formatRecordsPerPage: function (pageNumber) {
                    return " 每页显示" + pageNumber + '条记录';
                }
            });
        }

        function SetNumber(value, row, index) {
            var strHtml = "<input class='table-cell-input' data-Id=" + row.id + "  onchange='UpdateSampleGroupNumber(this)' value='" + value + "'/>";
            return strHtml;
        }

        function UpdateSampleGroupNumber(obj) {
            var number = $(obj).val();
            $.post("UpdateSampleGroupNumber", {
                Id: $(obj.outerHTML).attr("data-Id"),
                number: number
            }, function (data) {
                if (data.indexOf("成功") <= 0) {
                    //alert(data);
                }
            });
        }

        function LoadSample(SampleGroupId) {
            var columns = [{ field: "id", visible: false }, { field: "name" }, { field: "defaultNumber" }, { field: "description" }, { field: "site" },
            { field: "group" }, { field: "workFlowName" }, { field: "reportName" }, { field: "sampleNumber", width: "5%", align: "center", formatter: SetNumber }];

            $('#SampleGroup-Sample').bootstrapTable('destroy'); // 这行代码必须加，否则数据无法刷新
            $('#SampleGroup-Sample').bootstrapTable({
                method: 'post',
                url: "GetSamplesBySGID",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
                queryParams: function (params) {
                    var data = {
                        SampleGroupId: SampleGroupId,  // 传递的参数，这的名称要和控制器里对应的参数名称一样
                    };
                    return data;
                }, //参数
                queryParamsType: "search", //参数格式,发送标准的RESTFul类型的参数请求

                uniqueId: "id",          // 设置主键
                //search: true,  // 显示查询工具栏
                //showRefresh: true,  // 显示刷新按钮
                //showColumns: true,  // 可控制列的隐藏和显示
                //pagination: true,  // 显示分页条,设为true，启用了分页功能  暂时不分页
                //pageSize: 15,   // 默认页大小
                //pageList: [5, 10, 15, 20],  // 控制每页数目
                //showToggle: true,  //
                locale: "zh-CN",
                columns: columns,          // 加载列定义, 注意！这个地方绑定的列名称开头大写字母会全部变成小写。
                silent: true,  //刷新事件必须设置
                onClickRow: function (row, $element, field) {
                    $("#SampleGroup-Sample").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");
                },
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {  //没有匹配的结果
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    $('#SampleGroup-Sample').bootstrapTable('removeAll');
                },
                onLoadSuccess: function (data) {   // 数据加载成功后触发该事件
                    SetBootstrapStyle();
                },
                formatShowingRows: function (pageFrom, pageTo, totalRows) {
                    return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
                },
                formatRecordsPerPage: function (pageNumber) {
                    return " 每页显示" + pageNumber + '条记录';
                }
            });
        }

        $("#SampleGroup-DeleteSG").click(function () {
            if (GetSelectIdByColor('SampleGroup-Table').length == 0) {
                return;
            }

            $("#SampleGroup-Modal-DelSpecSG").modal({
                backdrop: 'static',
                keyboard: false
            });
        });

        $("#SampleGroup-Modal-delSample-delete").click(function () {
            $.post("postDeleteSGSample", {
                Id: GetSelectIdByColor('SampleGroup-Sample')
            }, function (data) {
                if (data.indexOf("成功") >= 0) {
                    $('#SampleGroup-Sample').bootstrapTable('removeByUniqueId', GetSelectIdByColor('SampleGroup-Sample'));  // 删除指定的行
                } else {
                    alert(data);
                }
            });

            $("#SampleGroup-Modal-delSample").modal('hide');
        });

        $("#SampleGroup-Modal-DelSpecSG-delSample").click(function () {
            $.post("postDeleteSampleGroup", {
                Id: GetSelectIdByColor('SampleGroup-Table')
            }, function (data) {
                if (data.indexOf("成功") >= 0) {
                    $('#SampleGroup-Table').bootstrapTable('removeByUniqueId', GetSelectIdByColor('SampleGroup-Table'));  // 删除指定的行
                } else {
                    alert(data);
                }
            });

            $("#SampleGroup-Modal-DelSpecSG").modal('hide');
        });

        $("#SampleGroup-add").click(function () {
            $("#SampleGroup-Modal-Title").text("新建样品组");

            $("#SampleGroup-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $.post("AddSampleGroup", {
                SampleGroupId: "",
                ModalID: "SampleGroup-Modal"
            }, function (datas) {
                $("#Embed").html(datas);
            });
        });

        $("#SampleGroup-Edit").click(function () {
            var ids = GetSelectIdByColor('SampleGroup-Table');
            if (ids.length == 0) {
                alert("请先选择需要编辑的样品组！");
                return;
            }

            $("#SampleGroup-Modal-Title").text("编辑样品组");

            $("#SampleGroup-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $.post("AddSampleGroup", {
                SampleGroupId: ids.split(',')[0],
                ModalID: "SampleGroup-Modal"
            }, function (datas) {
                $("#Embed").html(datas);
            });
        });

        $('#SampleGroup-Modal').on('hidden.bs.modal', function (event) {
            if (event.target == this) {
                LoadSample(GetSelectIdByColor('SampleGroup-Table'));
            }
        });

        $("#SampleGroup-addSample").click(function () {
            var SampleGroupId = GetSelectIdByColor('SampleGroup-Table');
            if (SampleGroupId.length == 0) {
                alert("请先选择需要添加样品的样品组！");
                return;
            }

            $("#SampleGroup-Modal-Title").text("添加样品到样品组中");

            $("#SampleGroup-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $.post("SelectSampleDefinition", {
                ModalID: "SampleGroup-Modal",
                SampleGroupId: SampleGroupId
            }, function (datas) {
                $("#Embed").html(datas);
            });
        });

        $("#SampleGroup-delSample").click(function () {
            if (GetSelectIdByColor('SampleGroup-Sample').length == 0) {
                return;
            }

            $("#SampleGroup-Modal-delSample").modal({
                backdrop: 'static',
                keyboard: false
            });
        });

    </script>
}
